<template>
	<view class="container">
		<view class="QS-tabs-box">
			<QSTabs ref="tabs" :tabs="tabs" animationMode="line3" :current="current" @change="change" activeColor="#33CCFF"
			 lineColor="#33CCFF" swiperWidth="750">
			</QSTabs>
		</view>
		<swiper :style="{'height': '1200rpx'}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y style="height: 100%;width: 100%;">
					<view class="scroll-items">
						<view class="scroll-item" v-for="(ite, ind) in 10" :key="ind">
							<view class="scroll-item-image-box">
								<image src="/static/logo.jpg" mode="aspectFill" class="scroll-item-image"></image>
							</view>
							<view class="scroll-item-text-box">
								<view>
									时间格式：{{ dateTime }}
								</view>
								<view>
									手机号: {{ phone }}
								</view>
								<view>
									小数: {{ number }}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import QSTabs from '@/components/QS-tabs/QS-tabs.vue';
	const Sys = uni.getSystemInfoSync();
	const wH = Sys.windowHeight;
	let n = 1;
	const tabs = Array(4).fill('').map(() => 'tab' + Array(n).fill('s').join('') + n++);

	import {
		request
	} from '@/utils/request.js'
	import {
		formatDate
	} from '@/utils/filters.js'
	import {
		regPhone
	} from '@/utils/filters.js'
	import {
		numFilter
	} from '@/utils/filters.js'

	export default {
		data() {
			return {
				tabs: [...tabs],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				dateTime: 1350052653,
				phone: 166690,
				number: 0.69854
			}
		},
		components: {
			QSTabs
		},
		methods: {
			//切换tabs
			change(index) {
				this.swiperCurrent = index;
				this.getList()
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			//获取列表
			getList() {
				uni.showLoading({
				    title: '加载中'
				});
				let opts = {
					url: '/erp/api/design/getList',
					method: 'get'
				};
				let param = {
					token: "4fb069d0b8382e6ccd3bf32aa29ac03c"
				};
				request(opts, param).then(res => {
					
					console.log('数据',res);
					uni.hideLoading();
					uni.stopPullDownRefresh();
				}, error => {
					console.log(error);
				})

			}
		},
		onLoad() {
			this.getList()

			this.dateTime = formatDate(this.dateTime)
			this.number = numFilter(this.number)

			if (!regPhone(this.phone)) {
				uni.showToast({
					title: '手机号有误',
					icon: 'none',
					duration: 2000
				});
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			this.getList()
		},
		//上拉触底加载
		onReachBottom() {
			console.log("触底")
		}
	}
</script>

<style scoped>
	.container {
		
	}

	/* .QS-tabs-box {
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: white;
	} */

	.swiper-item {
		background-color: #fff;
	}

	.scroll-items {
		display: flex;
		flex-direction: column;
		width: 100%;
		padding: 40rpx;
	}

	.scroll-item {
		margin-top: 15rpx;
		padding: 25rpx;
		background-color: white;
		border-radius: 8rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		border: 1px solid #f8f8f8;
	}

	.scroll-item-image-box {
		flex-grow: 0;
	}

	.scroll-item-text-box {
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 28rpx;
		font-weight: bold;
		margin-left: 15rpx;
	}

	.scroll-item-image {
		border-radius: 4rpx;
		width: 150rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}
</style>
